<template>
  <div>
    <sell-promotion ref="refSellPromotionModal" @submit='handleSubmit'></sell-promotion>
    <div class="section">
      <div class="section-title">基础促销</div>
      <Col span="8" style="width: 450px !important">
        <Card style="width:400px;" :padding=0>
          <div class="card-content" @click="createDiscount(0)">
            <img
              class="card-content-icon"
              src="../../assets/images/package_discount.png"
              alt=""
            />
            <div class="card-content-desc">
              <span class="card-content-desc-title">整单折扣</span>
              <span class="card-content-desc-text">对订单进行整体折扣</span>
              <span class="card-content-desc-example">例：整单8折</span>
            </div>
          </div>
          <div class="card-content-button" @click="createDiscount(0)">
            <span class="card-content-button-text">创建+</span>
          </div>
        </Card>
      </col>
      <Col span="8" v-if="accountType == 'store'">
        <Card style="width:400px;" :padding=0>
          <div class="card-content" @click="createDiscount(1)">
            <img
              class="card-content-icon"
              src="../../assets/images/product_discount.png"
              alt=""
            />
            <div class="card-content-desc">
              <span class="card-content-desc-title">商品折扣</span>
              <span class="card-content-desc-text">对指定商品设置折扣</span>
              <span class="card-content-desc-example">例：可乐5折</span>
            </div>
          </div>
          <div class="card-content-button" @click="createDiscount(1)">
            <span class="card-content-button-text">创建+</span>
          </div>
        </Card>
      </col>
    </div>
    <div class="section" v-if="accountType == 'store'">
      <div class="section-title">场景促销</div>
      <Col span="8">
        <Card style="width:400px;" :padding=0>
          <div class="card-content" @click="createDiscount(2)">
            <img
              class="card-content-icon"
              src="../../assets/images/achieve_discount.png"
              alt=""
            />
            <div class="card-content-desc">
              <span class="card-content-desc-title">满赠/每满赠</span>
              <span class="card-content-desc-text">消费满指定金额，即赠送指定商品</span>
              <span class="card-content-desc-example">例：满100元可赠送可乐1瓶</span>
            </div>
          </div>
          <div class="card-content-button" @click="createDiscount(2)">
            <span class="card-content-button-text">创建+</span>
          </div>
        </Card>
      </col>
    </div>
  </div>
</template>
<script>
import sellPromotionModal from "./sellPromotionModal.vue"
import {
  storeActivityManageSave, // 单店-保存/更新活动
  chainActivityManageSave // 连锁-保存/更新活动
} from "@/api/order";
export default {
  data () {
    return {
      accountType: 'store', // 登录类型默认为单店
      createDiscountType: 0 // 创建折扣类型 0整单折扣 1商品折扣 2满减
    }
  },
  methods: {
    init() {
      this.accountType = localStorage.getItem('userLoginType');
    },
    // 创建促销活动
    createDiscount(type) {
      this.createDiscountType = type;
      this.$refs.refSellPromotionModal.init({}, type, false);
    },
    handleSubmit(params) {
      if (this.accountType == 'store') {
        this.storeActivityManageSave(params);
      } else {
        this.chainActivityManageSave(params);
      }
    },
    async storeActivityManageSave(params) {
      const Loading = this.$myLoading({
        content: "正在创建促销活动，请稍后…"
      });

      const { data } = await storeActivityManageSave(params);
      if (data.code == 200 && data.result) {
        this.$Message.success('创建促销活动成功');
        this.$refs.refSellPromotionModal.disappear();
      } else {
        this.$Message.error(data.message);
      }
      this.closeLoading(Loading);
    },
    async chainActivityManageSave(params) {
      const Loading = this.$myLoading({
        content: "正在创建促销活动，请稍后…"
      });

      const { data } = await chainActivityManageSave(params);
      if (data.code == 200 && data.result) {
        this.$Message.success('创建促销活动成功');
        this.$refs.refSellPromotionModal.disappear();
      } else {
        this.$Message.error(data.message);
      }
      this.closeLoading(Loading);
    },
    // 关闭加载动画
    closeLoading(Loading) {
      let timer = setTimeout(() => {
        clearTimeout(timer);
        timer = null;
        Loading && Loading.close();
      }, 300);
    }
  },
  components: {
    sellPromotion: sellPromotionModal
  },
  mounted () {
    this.init();
  }
}
</script>

<style lang="less">
.section {
  display: block;
  height: 250px;
}

.section-title {
  font-size: 18px;
  width: 72px;
  height: 24px;
  font-weight: 800;
  border-bottom: 1px #F8B009 solid;
  border-bottom-width: 5px;
}

.ivu-col-span-8 {
  margin-top: 15px;
}
.ivu-card-body {
  padding: 0px !important;
}
.card-content {
  display: flex;
  flex-direction: row;
}

.card-content-icon {
  width: 35px;
  height: 35px;
  margin: 15px;
}

.card-content-desc {
  display: flex;
  flex-direction: column;
}
.card-content-desc-title {
  color: #172735;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
}

.card-content-desc-text {
  color: darkgray;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
}

.card-content-desc-example {
  color: darkgray;
  margin: 2px 0 50px 0;
  font-size: 13px;
  font-weight: 500;
}

.card-content-button {
  display: flex;
  height: 44px;
  background-color: #f5f5f5;
  border-top: 1px solid #dcdee2;
  align-items: center;
}
.card-content-button-text {
  width: 100%;
  color: gray;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
</style>
